<script setup>
import { ref, reactive } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'

// 当前激活的标签
const activeTab = ref('website')

// 网站设置
const websiteForm = reactive({
  siteName: '贵州四季康养管理系统',
  siteUrl: 'https://example.com',
  logo: '',
  description: '贵州四季康养管理系统是一个专业的旅游管理平台',
  keywords: '贵州,旅游,康养,管理系统',
  copyright: '© 2025 贵州四季康养 版权所有'
})

// 支付设置
const paymentForm = reactive({
  wechatEnabled: true,
  wechatAppId: '',
  wechatSecret: '',
  alipayEnabled: true,
  alipayAppId: '',
  alipaySecret: '',
  unionpayEnabled: false,
  unionpayMerchantId: ''
})

// 通知设置
const notificationForm = reactive({
  emailEnabled: true,
  emailHost: 'smtp.example.com',
  emailPort: '465',
  emailUser: '',
  emailPassword: '',
  smsEnabled: true,
  smsProvider: 'aliyun',
  smsAccessKey: '',
  smsSecret: ''
})

// 保存网站设置
const saveWebsiteSettings = () => {
  MessagePlugin.success('网站设置保存成功')
}

// 保存支付设置
const savePaymentSettings = () => {
  MessagePlugin.success('支付设置保存成功')
}

// 保存通知设置
const saveNotificationSettings = () => {
  MessagePlugin.success('通知设置保存成功')
}

// 备份数据
const backupData = () => {
  MessagePlugin.info('正在备份数据...')
  setTimeout(() => {
    MessagePlugin.success('数据备份完成')
  }, 2000)
}

// 恢复数据
const restoreData = () => {
  MessagePlugin.warning('恢复数据将覆盖现有数据，请谨慎操作')
}
</script>

<template>
  <div class="settings-container">
    <t-card>
      <t-tabs v-model="activeTab">
        <!-- 网站设置 -->
        <t-tab-panel value="website" label="网站设置">
          <t-form :data="websiteForm" label-width="120px">
            <t-form-item label="网站名称">
              <t-input v-model="websiteForm.siteName" placeholder="请输入网站名称" />
            </t-form-item>
            <t-form-item label="网站地址">
              <t-input v-model="websiteForm.siteUrl" placeholder="请输入网站地址" />
            </t-form-item>
            <t-form-item label="网站Logo">
              <t-upload
                v-model="websiteForm.logo"
                action="/api/upload"
                :max="1"
                accept="image/*"
              >
                <t-button theme="default">
                  <template #icon><t-icon name="upload" /></template>
                  上传Logo
                </t-button>
              </t-upload>
            </t-form-item>
            <t-form-item label="网站描述">
              <t-textarea
                v-model="websiteForm.description"
                placeholder="请输入网站描述"
                :maxlength="200"
                :autosize="{ minRows: 3, maxRows: 5 }"
              />
            </t-form-item>
            <t-form-item label="关键词">
              <t-input v-model="websiteForm.keywords" placeholder="请输入关键词，多个用逗号分隔" />
            </t-form-item>
            <t-form-item label="版权信息">
              <t-input v-model="websiteForm.copyright" placeholder="请输入版权信息" />
            </t-form-item>
            <t-form-item>
              <t-button theme="primary" @click="saveWebsiteSettings">保存设置</t-button>
            </t-form-item>
          </t-form>
        </t-tab-panel>

        <!-- 支付设置 -->
        <t-tab-panel value="payment" label="支付设置">
          <t-form :data="paymentForm" label-width="120px">
            <t-divider align="left">微信支付</t-divider>
            <t-form-item label="启用微信支付">
              <t-switch v-model="paymentForm.wechatEnabled" />
            </t-form-item>
            <t-form-item v-if="paymentForm.wechatEnabled" label="AppID">
              <t-input v-model="paymentForm.wechatAppId" placeholder="请输入微信AppID" />
            </t-form-item>
            <t-form-item v-if="paymentForm.wechatEnabled" label="密钥">
              <t-input v-model="paymentForm.wechatSecret" type="password" placeholder="请输入微信支付密钥" />
            </t-form-item>

            <t-divider align="left">支付宝</t-divider>
            <t-form-item label="启用支付宝">
              <t-switch v-model="paymentForm.alipayEnabled" />
            </t-form-item>
            <t-form-item v-if="paymentForm.alipayEnabled" label="AppID">
              <t-input v-model="paymentForm.alipayAppId" placeholder="请输入支付宝AppID" />
            </t-form-item>
            <t-form-item v-if="paymentForm.alipayEnabled" label="密钥">
              <t-input v-model="paymentForm.alipaySecret" type="password" placeholder="请输入支付宝密钥" />
            </t-form-item>

            <t-divider align="left">银联支付</t-divider>
            <t-form-item label="启用银联支付">
              <t-switch v-model="paymentForm.unionpayEnabled" />
            </t-form-item>
            <t-form-item v-if="paymentForm.unionpayEnabled" label="商户号">
              <t-input v-model="paymentForm.unionpayMerchantId" placeholder="请输入银联商户号" />
            </t-form-item>

            <t-form-item>
              <t-button theme="primary" @click="savePaymentSettings">保存设置</t-button>
            </t-form-item>
          </t-form>
        </t-tab-panel>

        <!-- 通知设置 -->
        <t-tab-panel value="notification" label="通知设置">
          <t-form :data="notificationForm" label-width="120px">
            <t-divider align="left">邮件通知</t-divider>
            <t-form-item label="启用邮件通知">
              <t-switch v-model="notificationForm.emailEnabled" />
            </t-form-item>
            <t-form-item v-if="notificationForm.emailEnabled" label="SMTP服务器">
              <t-input v-model="notificationForm.emailHost" placeholder="请输入SMTP服务器地址" />
            </t-form-item>
            <t-form-item v-if="notificationForm.emailEnabled" label="端口">
              <t-input v-model="notificationForm.emailPort" placeholder="请输入端口号" />
            </t-form-item>
            <t-form-item v-if="notificationForm.emailEnabled" label="用户名">
              <t-input v-model="notificationForm.emailUser" placeholder="请输入邮箱用户名" />
            </t-form-item>
            <t-form-item v-if="notificationForm.emailEnabled" label="密码">
              <t-input v-model="notificationForm.emailPassword" type="password" placeholder="请输入邮箱密码" />
            </t-form-item>

            <t-divider align="left">短信通知</t-divider>
            <t-form-item label="启用短信通知">
              <t-switch v-model="notificationForm.smsEnabled" />
            </t-form-item>
            <t-form-item v-if="notificationForm.smsEnabled" label="短信服务商">
              <t-select v-model="notificationForm.smsProvider">
                <t-option value="aliyun" label="阿里云" />
                <t-option value="tencent" label="腾讯云" />
                <t-option value="huawei" label="华为云" />
              </t-select>
            </t-form-item>
            <t-form-item v-if="notificationForm.smsEnabled" label="AccessKey">
              <t-input v-model="notificationForm.smsAccessKey" placeholder="请输入AccessKey" />
            </t-form-item>
            <t-form-item v-if="notificationForm.smsEnabled" label="Secret">
              <t-input v-model="notificationForm.smsSecret" type="password" placeholder="请输入Secret" />
            </t-form-item>

            <t-form-item>
              <t-button theme="primary" @click="saveNotificationSettings">保存设置</t-button>
            </t-form-item>
          </t-form>
        </t-tab-panel>

        <!-- 备份与恢复 -->
        <t-tab-panel value="backup" label="备份与恢复">
          <div class="backup-section">
            <t-card title="数据备份" class="backup-card">
              <p>定期备份数据可以防止数据丢失，建议每天至少备份一次。</p>
              <t-space>
                <t-button theme="primary" @click="backupData">
                  <template #icon><t-icon name="download" /></template>
                  立即备份
                </t-button>
                <t-button theme="default">查看备份历史</t-button>
              </t-space>
            </t-card>

            <t-card title="数据恢复" class="backup-card">
              <p>从备份文件恢复数据，恢复操作将覆盖现有数据，请谨慎操作。</p>
              <t-upload
                action="/api/restore"
                :max="1"
                accept=".sql,.zip"
              >
                <t-button theme="warning">
                  <template #icon><t-icon name="upload" /></template>
                  上传备份文件
                </t-button>
              </t-upload>
            </t-card>

            <t-card title="自动备份设置" class="backup-card">
              <t-form label-width="120px">
                <t-form-item label="启用自动备份">
                  <t-switch />
                </t-form-item>
                <t-form-item label="备份频率">
                  <t-select placeholder="请选择备份频率">
                    <t-option value="daily" label="每天" />
                    <t-option value="weekly" label="每周" />
                    <t-option value="monthly" label="每月" />
                  </t-select>
                </t-form-item>
                <t-form-item label="备份时间">
                  <t-time-picker placeholder="请选择备份时间" />
                </t-form-item>
                <t-form-item>
                  <t-button theme="primary">保存设置</t-button>
                </t-form-item>
              </t-form>
            </t-card>
          </div>
        </t-tab-panel>
      </t-tabs>
    </t-card>
  </div>
</template>

<style scoped>
.settings-container {
  height: 100%;
}

.backup-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.backup-card {
  margin-bottom: 16px;
}

.backup-card p {
  margin-bottom: 16px;
  color: #666;
}
</style>